<template>
  <div class="cart-item">
    <van-swipe-cell>
      <template #default>
        <!-- 复选框按钮 -->
        <van-checkbox v-model="checked" checked-color="#ee0a24" />
        <!-- 商品信息 -->
        <van-card
          :price="itemData.price"
          :title="itemData.title"
          class="goods-card"
          :thumb="itemData.image"
          @click="handleRouter"
        />
        <!-- 购买的商品数量，:max="itemData.stock" 绑定的是库存量 -->
        <van-stepper v-model="buyNum" theme="round" button-size="23" disable-input :max="itemData.stock"/>
      </template>
      <template #right>
        <!-- 删除按钮 -->
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import useStore from '@/store/index.js'
const router = useRouter()
// ------------------ 1. 接收父组件传递过来的购物车列表的数据 -----------------
const { itemData } = defineProps({
  itemData: {
    type: Object,
    require: true
  }
})

// ----------------- 2. 设置路由跳转的函数，商品卡片点击时触发 ---------------
const handleRouter = () => {
  router.push({
    name: 'product',
    params: {
      productId: itemData.productId
    }
  })
}

/*
-------------------- 3. 购物车列表被选中状态处理 ---------------------
a. 需要通过状态管理器获取到是否被选中的状态；
b. 通过状态管理器中 actions 中定义的方法对选中状态进行改变；
*/
// 3.1 创建购物车状态管理器实例
const { cartStore } = useStore()
// 3.2 通过计算属性，获取、设置购物车状态管理器实例的选中状态
const checked = computed({
  // 获取选中状态
  get () {
    return itemData.checked
  },
  // 设置新的选中状态，newChecked 新的的状态；itemData.id 当前商品项对应的 id，用来告知修改哪一条的状态；
  set (newChecked) {
    cartStore.changeChecked(newChecked, itemData.id)
  }
})
// 3.3 通过计算属性，获取、设置购物车状态管理器实例中商品购买数量 count 的状态
const buyNum = computed({
  // 获取商品的购买数量
  get () {
    return itemData.count
  },
  // 设置新的商品的购买数量，newCount 新的的数量状态；itemData.id 当前商品项对应的 id，用来告知修改哪一条的状态；
  set (newCount) {
    cartStore.changeCount(newCount, itemData.id)
  }
})
</script>
<style lang='scss' scoped>
.cart-item {
  // 设置每一个列表项下方，有一条分割线
  background-color: #fff;
  margin-bottom: 1px;
  :deep(.van-swipe-cell__wrapper) {
    display: flex;
    // 复选框按钮
    .van-checkbox {
      margin-left: 10px;
    }
    // 商品信息
    .goods-card {
      flex: 1;
      margin: 0;
      background-color: #fff;
      .van-card__price {
        color: var(--van-submit-bar-price-color);
      }
      .van-card__title {
        font-size: 14px;
      }
      .van-card__content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
    }
    // 购买的商品数量
    .van-stepper {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
    // 删除按钮
    .van-swipe-cell__right {
      right: -1px;
      .delete-button {
        height: 100%;
      }
    }
  }
}
</style>
